<template>
    <div id="app" class="playlist">
        <div class="song_top"><h3>音乐榜单——应用S23-5班24贾认真</h3></div>
      <div v-for="(song, index) in songs" :key="index" class="song">
        <div class="rank">{{ index + 1 }}</div>
        <img :src="song.picUrl" alt="song image" />
        <div class="song_info">
          <h3>{{ song.name }}</h3>
          <p>{{ song.artist }}</p>
        </div>
        <p>{{ song.duration }}</p>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: "Topic",
    data() {
      return {
        songs: [],
      };
    },
    methods: {
      fetchMusic() {
        this.$api.getMusic().then((res) => {
          console.log('应用S23-5班24贾认真获取数据:',res);
          this.songs = res.result.map(song => ({
            ...song,
            duration: this.getRandomDuration()
          }));
        });
      },
      getRandomDuration() {
        const startHours = 3; // 3 AM
        const endHours = 6;   // 6 AM
  
        const randomHours = Math.floor(Math.random() * (endHours - startHours)) + startHours;
        const randomMinutes = Math.floor(Math.random() * 60);
  
        const hoursString = randomHours.toString().padStart(2, '0');
        const minutesString = randomMinutes.toString().padStart(2, '0');
  
        return `${hoursString}:${minutesString}`;
      }
    },
    created() {
      this.fetchMusic(); // 在组件创建时调用 fetchMusic 方法
    }
  };
  </script>
  
  <style>
  .playlist {
    /* width: 600px; */
    margin: 0 auto;
  }
  .song_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #f5f5f5;
  }
  .song {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #ccc;
  }
  .rank {
    width: 30px;
    text-align: center;
  }
  .song img {
    width: 50px;
    height: 50px;
  }
  .song_info{
    flex: 1;
    padding-left: 10px;
  }
  </style>